<template>
    <!-- 分割线 渲染组件 -->
    <div :class="['el-divider', `el-divider--${element.options.direction}`]"
        :style="{
            'background-color': `${element.options.backgroundColor} !important`,
            'width': `${element.options.direction == 'horizontal' ? '100%': element.options.lineWidth + 'px'}`,
            'height': `${element.options.direction == 'horizontal' ? element.options.lineWidth + 'px' : '1em' }`,
            'margin': `${element.options.direction == 'horizontal' ? element.options.margin + 'px' + ' 0' : '0 ' + element.options.margin + 'px' }`
        }">
        <div v-if="element.options.content && element.options.direction !== 'vertical'"
            :class="['el-divider__text', `is-${element.options.contentPosition}`]"
        >
            {{ element.options.content }}
        </div>
    </div>
</template>

<script>
export default {
    name: "RenderDivider",
    props: {
        element: {
            type: Object
        }
    }
}
</script>
